<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>帮助编辑/添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box mt">
            <el-form ref="form" label-position="left" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" :disabled="Edit"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                  <el-select v-model="form.type" placeholder="请选择配置类型" :disabled="Edit">
                    <el-option v-for="(item,index) in type" :label="item.name" :value="item.status" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="值" prop="value" v-if="form.type !== 2">
                  <el-input v-model="form.value"></el-input>
                </el-form-item>
                <el-form-item label="值" prop="value" v-if="form.type === 2">
                  <el-input v-model="fans_name" placeholder="负责人搜索" style="width: 200px;" @click="searchFans"></el-input>
                  <el-button type="primary" icon="el-icon-search" @click="searchFans">搜索</el-button>
                  <div></div>
                  <el-tag
                    style="margin-right: 10px;"
                    v-if="form.type === 2"
                    :key="tag.name"
                    v-for="(tag, index) in form.value"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index)">
                    {{tag.name}}
                  </el-tag>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                    <el-button @click="navTop" v-if="!Edit">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="overlay" @click="closeFansList"></div>
        <div class="fans-add">
          <el-checkbox-group v-model="check_list">
            <el-checkbox :label="item" :key="item.id" v-for="item in fans_list">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="15"
            style="margin-top: 15px;">
          </el-pagination>
          <el-button type="primary" size="mini" plain @click="valueAdd">确定</el-button>
          <el-button plain size="mini" @click="closeFansList">取消</el-button>
        </div>
    </div>
</template>

<script>
import bus from '../../../bus.js';
export default {
  name: 'v-form',
  data: function() {
    return {
      Edit: false,
      form: {},
      fans_name: undefined,
      fans_list: null,
      check_list: [],
      total: undefined,
      rules: {
          name: [
              { required: true, message: '请输入名称' }
          ],
          value: [
              { required: true, message: '请输入值' }
          ],
          type: [
              { required: true, message: '请选择类型' }
          ]
      },
      type: [
        {
          status: 0,
          name: '系统配置'
        },
        {
          status: 1,
          name: '微信模板消息'
        },
        {
          status: 2,
          name: '系统联系人'
        }
      ]
    }
  },
  methods: {
    onSubmit(formName) {
      //  进行规则验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
            // 验证通过，进行编辑/添加判断
            if (!this.Edit) {
                // 不是编辑，去除id
                delete this.form.id
                APP.ajax('post@config/add', this.form, res => {
                  if (res.data.status === 200) {
                      this.$message.success('添加成功！');
                  }
                })
            } else {
              APP.ajax('post@config/update', this.form, res => {
                if (res.data.status === 200) {
                    this.$message.success('编辑成功！')
                }
              })
            }
        } else {
          return false;
        }
      });
    },
    navTop() {
      bus.$emit('ViewShow', '取消');
    },
    handleClose(index){
      this.form.value.splice(index, 1);
    },
    searchFans() {
      APP.ajax('fans/list', { name: this.fans_name }, res => {
        this.fans_list = res.data.data.data;
        this.total = res.data.data.total;
        this.openFansList();
      });
    },
    openFansList() {
      document.getElementsByClassName('overlay')[0].style.display = 'block';
      document.getElementsByClassName('fans-add')[0].style.display = 'block';
    },
    closeFansList() {
      document.getElementsByClassName('overlay')[0].style.display = 'none';
      document.getElementsByClassName('fans-add')[0].style.display = 'none';
    },
    handleCurrentChange() {
      APP.ajax('fans/list?page=' + val, { name: this.fans_name }, res => {
        this.fans_list = res.data.data.data;
      });
    },
    valueAdd() {
      // 如果有重复的，就删除掉
      this.form.value.forEach(element => {
        this.check_list.forEach((el, index) => {
          if (element.name === el.name) {
            this.check_list.splice(index, 1);
          }
        })
      });
      // 进行推送
      this.check_list.forEach(element => {
        this.form.value.push({ openid: element.openid, name: element.name });
      });
      // 推送完成，删除数据
      this.check_list = [];
      this.closeFansList();
    }
  },
  mounted () {
    // 判断是否有id传值，没有则不是编辑页面，而是添加页面
    if (this.$route.params.id) {
      // 如果是编辑，名称、类型不能更改，只能改变值
      this.Edit = true;
      APP.ajax('config/list/' + this.$route.params.id, {}, res => {
          this.form = res.data.data;
      })
    }
  }
}
</script>
<style scoped>
.avatar{
    float: left;
    width: 100%;
    height: 100%;
}
.overlay{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9;
}
.fans-add{
  display: none;
  width: 500px;
  height: 500px;
  border: 1px solid #aaa;
  z-index: 10;
  position: fixed;
  left: calc(50% - 250px);
  top: calc(50% - 250px);
  background-color: #fff;
  padding: 15px 20px 20px 15px;
}
.fans-add button{
  margin: 20px auto 0;
}
</style>

